<template>
  <div class="recommend">
    <common-nav></common-nav>
    <div class="standard-container">
      <recommend-index :recommendData="recommends.list.list"></recommend-index>
    </div>

  </div>
</template>
<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import CommonNav from "../../components/common/common-nav"
   import RecommendIndex from '~/components/recommend/index.vue'
  import {StoreInterface} from "../../interfaces/PageInterface";
  import {State} from "vuex-class";
  import {Actions, Store} from "../../enums/Store";
  @Component({
    components:{
      CommonNav,
      RecommendIndex
    }
  })
  export default  class Latest extends Vue {
      @State(Store.Recommend) recommends:StoreInterface[Store.Recommend]

    async fetch({store}){
        await store.dispatch(Actions.GetRecommend)
    }

  }

</script>
<style lang="scss">

  @include component(recommend){

    background: $bg-container;
    min-height: 100vh;

  }

</style>
